<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>准了补偿</title>
    <meta name="description" content="请收下这份补偿！">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .back-box{
            width: 1rem;
            height: 0.36rem;
            background-color: transparent;
            position: absolute;
            top: 1rem;
        }

        .back {
            margin: auto;
            width: 0.2rem;
            height: 0.36rem;
            background-repeat: no-repeat;
            background-size: cover;
            background-image: url("https://zhunle.oss-cn-beijing.aliyuncs.com/active/compensate/compensate_back.png");
        }

        .top {
            width: 7.5rem;
            height: 12.14rem;
            background-repeat: no-repeat;
            background-size: cover;
            background-image: url("https://zhunle.oss-cn-beijing.aliyuncs.com/active/compensate/compensate1.png");
        }

        .middle {
            width: 7.5rem;
            height: 7.64rem;
            background-repeat: no-repeat;
            background-size: cover;
            background-image: url("https://zhunle.oss-cn-beijing.aliyuncs.com/active/compensate/compensate2.png");
        }

        #bottom {
            width: 7.5rem;
            height: 1.84rem;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .full_pop {
            /* 设置背景颜色为黑色 */
            background-color: rgba(0, 0, 0, 0.5);
            /* 或者使用 hsla() 函数 */
            /* background-color: hsla(0, 0%, 0%, 0.5); */

            /* 设置宽度和高度为100%，使背景全屏 */
            width: 100%;
            height: 100%;

            /* 可选：如果希望背景填充整个视口，可以使用以下属性 */
            position: fixed;
            top: 0;
            left: 0;
            display: none;
        }

        .overlay {
            /* 创建一个固定定位的遮罩层，覆盖整个屏幕 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明的黑色背景 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            display: none;
        }

        .modal {
            /* 弹窗的样式，例如背景色、边框等 */
            padding: 20px;
            border-radius: 5px;
        }

        .pop {
            width: 5.66rem;
            height: 7.12rem;
            background-repeat: no-repeat;
            background-size: cover;
            background-image: url("https://zhunle.oss-cn-beijing.aliyuncs.com/active/compensate/compensate_pop.png");
        }

        .pop_close {
            width: 0.64rem;
            height: 0.64rem;
            background-repeat: no-repeat;
            background-size: cover;
            background-image: url("https://zhunle.oss-cn-beijing.aliyuncs.com/active/compensate/compensate_pop_close.png");
            position: absolute;
            bottom: 2.68rem;
        }

    </style>
</head>
<body style="position: relative">
<div style="margin: 0 auto;width: 7.5rem">
    <div class="back-box"><div class="back"></div></div>
    <div class="top"></div>
    <div class="middle"></div>
    <div id="bottom"></div>
    <div class="full_pop"></div>
    <div class="overlay">
        <div class="modal" style="position: relative">
            <!-- 弹窗的内容 -->
            <div class="pop"></div>
        </div>
        <div class="pop_close"></div>
    </div>

</div>
</body>
<script type="text/javascript" src="{$oss}active/seven/js/jquery-v2.1.1.min.js"></script>
<script src="{$oss}/active/newyear/js/rem.js"></script>
<script type="application/javascript">

    let app_type = '{$app_type}';
    let status = parseInt('{$status}');
    let host = '{$host}';

    function setBottomBtn(status) {
        var divElement = document.getElementById('bottom');
        divElement.setAttribute('data-status', status)
        switch (parseInt(status)) {
            case 1:
                divElement.style.backgroundImage = "url('https://zhunle.oss-cn-beijing.aliyuncs.com/active/compensate/compensate_btn_get.png')";
                break;
            case 2:
                divElement.style.backgroundImage = "url('https://zhunle.oss-cn-beijing.aliyuncs.com/active/compensate/compensate_btn_coupon.png')";
                break;
            default:
                divElement.style.backgroundImage = "url('https://zhunle.oss-cn-beijing.aliyuncs.com/active/compensate/compensate_btn_expired.png')";
                break;
        }
    }

    setBottomBtn(status)

    /**
     * 通用跳转
     * @param target string 跳转方式
     * @param link string 跳转地址
     * @param umeng_event_name string 友盟事件名
     * @param umeng_event_label string 友盟事件参数
     */
    function commonJsToNative(target, link, umeng_event_name, umeng_event_label) {
        console.log('target=' + target + ',link=' + link + ',umeng_event_name=' + umeng_event_name + ',umeng_event_label=' + umeng_event_label)
        umeng_event_name = typeof umeng_event_name === 'undefined' ? '' : umeng_event_name;
        umeng_event_label = typeof umeng_event_label === 'undefined' ? '' : umeng_event_label;
        // if (umeng_event_name) {
        //     umeng_event_label += '-' + link
        // }
        if (!target)
            return
        else if (target === 'link') {
            link = domain + link
        }


        switch (app_type) {
            case 'ios':
                window.webkit.messageHandlers.commonJsToNative.postMessage({
                    'target': target,
                    'link': link,
                    'umeng_event_name': umeng_event_name,
                    'umeng_event_label': umeng_event_label
                });
                break;
            case 'android':
                androidwebview.commonJsToNative(target, link, umeng_event_name, umeng_event_label)
                break;
            default:
                console.log('not ios or android')
                if ('link' === target) {
                    window.location.href = link
                }
        }
    }

    /**
     * 提示信息
     * @param msg
     */
    function toast(msg) {
        var m = document.createElement('div');
        m.innerHTML = msg;
        m.style.cssText = 'color: #ffffff;background: rgba(0,0,0,0.7);width: 66%;line-height: 1rem;text-align: center;border-radius: 0.25rem;position: fixed;top: 95%;left: calc(17% - 16px);z-index: 999999;font-size: 0.32rem;padding: 0 16px; margin-top: -1.25rem';
        document.body.appendChild(m);
        setTimeout(function () {
            document.body.removeChild(m);
        }, 2500);
    }

    $(document).on('click', '.pop_close', function () {
        $('.full_pop').css('display', 'none')
        $('.overlay').css('display', 'none')
    })

    $(document).on('click', '.pop', function () {
        $('.full_pop').css('display', 'none')
        $('.overlay').css('display', 'none')
        commonJsToNative('local', 'discount_coupon_center?need_auth=2', 'common_js_to_native', '卡券中心')
    })

    $(document).on('click', '.back-box', function () {
        console.log(1111)
        commonJsToNative('local', 'back')
    })


    $(document).on('click', '#bottom', function () {
        console.log(this)
        let status = document.getElementById('bottom').getAttribute('data-status')
        if (parseInt(status) === 1) {
            $.ajax({
                url: host + '/api/v48/compensation_give',
                type: 'GET',
                dataType: 'json',
                data: {uid: '{$uid}'},
                headers: {$headers},
                success: function (res) {
                    if (res.code === 200) {
                        $('.full_pop').css('display', 'block')
                        $('.overlay').css('display', 'flex')
                        setBottomBtn(2)
                    } else {
                        toast(res.msg);
                    }
                }
            })
        } else if (parseInt(status) === 2) {
            commonJsToNative('local', 'discount_coupon_center?need_auth=2', 'common_js_to_native', '卡券中心')
        } else {
            console.log('活动已结束')
        }
    })
</script>
</html>
